import React from "react";
import { url, topplaylist } from "../../api/index";
import { axiosGet } from "../../axios";
import SongList from "../common/song-list";
import Infinite from "react-infinite";
import {inject,observer} from 'mobx-react'

@inject('songlist')
@observer
class SongListMain extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      songList: props.songlist.songlist,
      cat:'全部'
    };
  }
  componentDidMount() {
    this.getSongList('cat='+this.props.songlist.tag);
  }
  static getDerivedStateFromProps (nextProps, prevState) {
    return {
      cat: nextProps.songlist.tag,
      songlist:nextProps.songlist.songlist
    }
  }
  //  获取歌单
  getSongList(cat) {
    if(cat){
        axiosGet(url, topplaylist,"limit=200",cat).then((data) => {
            this.props.songlist.setSonglist(data.playlists)
            this.setState({
              songList: data,
              cat:data.cat
            });
          });
    }else{
        axiosGet(url, topplaylist,"limit=200").then((data) => {
            this.props.songlist.setSonglist(data.playlists)
            this.setState({
              songList: data,
              cat:data.cat
            });
          });
    }
  }
  //  渲染
  render() {
    const {songlist} = this.props.songlist

    return (
      <div className="songlist-all" style={{marginTop: '80px'}}>
        <Infinite containerHeight={430} elementHeight={40} useWindowAsScrollContainer style={{position:'fixed',top:'0'}}>
          <SongList list={songlist}></SongList>
        </Infinite>
      </div>
    );
  }
}
export default SongListMain
